위 챗 애플 릿 스크롤 선택 기(시간 날짜)상세 설명 및 인 스 턴 스 코드
위 챗 애플 릿 은 스스로 많은 컨트롤 을 봉 인 했 습 니 다.사용 하기에 정말 편리 합 니 다.이것 이 안 드 로 이 드 라면 스스로 정의 해 야 합 니 다.쓸데없는 말 하지 마 세 요.효과 그림:
어떻게 이 루어 졌 는 지 한번 볼 까요?보고 나 면 니 마 라 고 해 야 지........................................................
이 효 과 는 picker 구성 요 소 를 사용 해 야 합 니 다.애니메이션 이 아래쪽 에서 튀 어 나 온 스크롤 선택 기 를 사용 해 야 합 니 다.현 재 는 세 가지 선택 기 를 지원 합 니 다.mode 를 통 해 구분 합 니 다.각각 일반 선택 기,시간 선택 기,날짜 선택 기 입 니 다.기본 값 은 일반 선택 기 입 니 다.
해당 속성 보기:
구체 적 으로 코드,레이아웃 을 살 펴 보 자.
<view class="section" >
<picker bindchange="bindPickerChange" value="{{index}}" range="{{objectArray}}" mode = "selector">
<view class="picker">
：{{objectArray[index]}}
</view>
</picker>
</view>
<view class="section">
<picker mode="time" value="{{time}}" start="00:00" end="23:59" bindchange="bindTimeChange">
<view class="picker">
: {{times}}
</view>
</picker>
</view>
<view class="section">
<picker mode="date" value="{{date}}" start="1978-01-01" end="2017-1-23" bindchange="bindDateChange">
<view class="picker">
: {{dates}}
</view>
</picker>
</view>
.section{
background:#CABBC7;
margin:20rpx;
padding:20rpx
}
Page({
data: {
dates: '2016-11-08',
times: '12:00',
objectArray: [' ', ' ', ' '],
index: 0,
},
//
bindTimeChange: function (e) {
console.log(" ")
this.setData({
times: e.detail.value
})
},
//
bindDateChange: function (e) {
console.log(e.detail.value)
this.setData({
dates: e.detail.value
})
},
//
bindPickerChange: function (e) {
console.log(e.detail.value)
this.setData({
index: e.detail.value
})
}
읽 어 주 셔 서 감사합니다. 여러분 에 게 도움 이 되 기 를 바 랍 니 다.본 사이트 에 대한 여러분 의 지지 에 감 사 드 립 니 다!
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
OpenSSL 생 성 ssl 인증서텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
